<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2024-01-23 16:59:18
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-01-23 21:04:44
 * @FilePath: \Song-ui\src\components\Icon\Icon.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import type { IconProp } from './type'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { omit } from 'lodash-es'
import { computed } from 'vue'

defineOptions({
  name: 'SGIcon',
  inheritAttrs: false
})
const props = defineProps<IconProp>()

const filterProps = computed(() => omit(props, ['type', 'color']))

const customStyle = computed(() => (props.color ? { color: props.color } : {}))
</script>

<template>
  <i class="sg-icon" :class="{ [`sg-icon--${type}`]: type }" :style="customStyle" v-bind="$attrs">
    <font-awesome-icon v-bind="filterProps" />
  </i>
</template>

<style lang="scss" scoped></style>
